<template lang="pug">
    skin(@up="up",@down="down",@yes="yes",@back="back",@duringUp="up",@duringDown="down")
        div(class="flex-column fast-setting")
            div(class="flex-column-item flex-row h3")
                div(class="flex-row-item")
                    span(class="under-line") {{currentRange.name}}-{{nextHour}}
                div(class="flex-row-item")
                    span(class="range-amount active-block") {{currentRange.value}}U
            div(class="flex-column-item flex-row h3")
                div(class="flex-row-item")
                    span 基础总量:
                div(class="flex-row-item right")
                    span() {{totalAmount}}U
            div(class="flex-column-item flex-2")
                rate-chart(v-model="rateValues",:active-index="currentRangeIndex",ref="chart")

        control-select(v-model="selectModel",:visible="selectVisible",ref="ask")

</template>

<script>
export default {
  data() {
    return {
      increment: 0.1,
      max: 5,
      min: 0,
      basicRate: [],
      currentRange: null,
      currentRangeIndex: 0,

      selectVisible: false,
      selectModel: {
        name: "是否执行？",
        value: { name: "执行", value: true },
        options: [{ name: "执行", value: true }, { name: "退出", value: false }]
      }
    };
  },
  computed: {
    totalAmount() {
      let total = 0;
      this.basicRate.value.forEach(
        rate => (total = (total * 10 + rate.value * 10) / 10)
      );
      return total;
    },
    nextHour() {
      return this.currentRangeIndex == this.basicRate.value.length - 1
        ? "24"
        : this.basicRate.value[this.currentRangeIndex + 1].name;
    },
    rateValues() {
      return this.basicRate.value.map(t => {
        return t.value;
      });
    }
  },

  methods: {
    up() {
      if (this.selectVisible) {
        this.$refs.ask.up();
        return;
      }
      this.currentRange.value =
        this.currentRange.amount == this.max
          ? this.min
          : (this.currentRange.value * 10 + this.increment * 10) / 10;

      this.basicRate.value[
        this.currentRangeIndex
      ].value = this.currentRange.value;
    },
    down() {
      if (this.selectVisible) {
        this.$refs.ask.down();
        return;
      }
      this.currentRange.value =
        this.currentRange.value == this.min
          ? this.max
          : (this.currentRange.value * 10 - this.increment * 10) / 10;
      this.basicRate.value[
        this.currentRangeIndex
      ].value = this.currentRange.value;
    },

    back() {
      if (!this.selectVisible) {
        this.selectVisible = true;
      } else {
        // 执行弹窗显示界面
        this.setWindowRate();
      }
    },
    yes() {
      if (this.selectVisible) {
        this.setWindowRate();
        return;
      }
      if (this.currentRangeIndex === this.basicRate.value.length - 1) {
        this.currentRangeIndex = 0;
      } else {
        this.currentRangeIndex += 1;
      }
      this.currentRange = this.basicRate.value[this.currentRangeIndex];
    },
    setWindowRate() {
      const plan = this.$route.query.plan;
      switch (plan) {
        case "A":
          window.rate.planA = this.basicRate;
          break;
        case "B":
          window.rate.planB = this.basicRate;
          break;
        case "C":
          window.rate.planC = this.basicRate;
          break;
      }

      // 使用方案
      if (this.selectModel.value.value === true) {
        window.rate.basicRate = this.basicRate;
        window.rate.records.push(
          Object.assign(
            {
              type: window.advance.medicalCat.value,
              createTime: new Date()
            },
            this.basicRate
          )
        );
      }

      this.$router.push(`/base-rate/plan?index=${plan}`);
    }
  },
  created() {
    const plan = this.$route.query.plan;
    switch (plan) {
      case "A":
        this.basicRate = window.rate.planA;
        break;
      case "B":
        this.basicRate = window.rate.planB;
        break;
      case "C":
        this.basicRate = window.rate.planC;
        break;
    }

    this.currentRange = this.basicRate.value[0];
    this.currentRangeIndex = 0;
  }
};
</script>

<style lang="less">
</style>
